<template>
  <div class="box">
    <div class="box-header" :title="hintText">
      <span class="title pos-left">{{title}}</span>
       <ul class="tools pos-right">
        <li class="item">
          <button class="btn" type="button" @click="showSettingWindow">
            <i class="icon icon-setting"></i>
          </button>
        </li>
      </ul>
    </div>
    <div class="box-body">
      <div class="chart fullsize" id="chart-5"></div>
      <div class="chartSetting" v-show="showSetting">
        <div class="form">
          <div class="form-head">
            <div class="title">选择时间范围</div>
          </div>
          <div class="form-body">
            <div class="form-item">
              <div class="label">开始时间</div>
              <div class="field">
                <input
                  type="date"
                  class="datepicker"
                  v-model="startTime"
                  :max="timeLimit"
                  :min="timeMin"
                >
              </div>
            </div>
            <div class="form-item">
              <div class="label">结束时间</div>
              <div class="field">
                <input
                  type="date"
                  class="datepicker"
                  v-model="endTime"
                  :max="timeLimit"
                  :min="timeMin"
                >
              </div>
            </div>
          </div>
          <div class="form-foot">
            <button type="button" @click="saveSetting" class="btn bg-green">
              <span class="text">确定</span>
            </button>
            <button type="button" @click="cancelSetting" class="btn bg-green">
              <span class="text">关闭</span>
            </button>
          </div>
        </div>
      </div>
        <x-loading :show="showLoading"></x-loading>
        <dl-Season ref="dialog" :show="showModal" :take="keyModal"></dl-Season>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import echarts from "echarts";
import Loading from "@/components/Loading";
import Pager from "@/components/Pager";
import dlSeason from "@/view/onepic/dl_Season";

export default {
  data() {
    return {
      showSetting: false,
      showLoading: false,
      params: null,
      startTime: "2018-01-01",
      endTime: "2018-12-31",
      chartInstance: null,
      option: null,
      showModal: false,
      keyModal: null,
      autoflip: false,
      ticketfn: null,
      timeLimit:this.dateShift(0),
      timeMin:this.dateShift(-365*2)
    };
  },
  props: {
    title: String
  },
  computed: {
    hintText(){
      return `显示数据自${this.startTime}起，截止至${this.endTime}`
    }
  },
  components: {
    "x-loading": Loading,
    "x-pager": Pager,
    "dl-Season": dlSeason
  },
  methods: {
     showSettingWindow() {
      this.showSetting = true;
    },
     cancelSetting() {
      this.showSetting = false;
    },
    saveSetting() {
      this.renderChart();
      this.showSetting = false;
    },
    renderChart() {
      let $this = this;
      let params = {
        HTTEST: "test",
        startTime:this.startTime + ' 00:00:00',
        endTime:this.endTime+' 23:59:59'
      };
      this.showLoading=true
      axios.get(this.URLHEAD+'YZT_XFJJXFX',{
          params:params
      }).then(res=>{
          let data = res.data;
          this.option ={
            tooltip: {
              trigger: "axis",
              axisPointer: {
                lineStyle: {
                  color: "#57617B"
                }
              }
            },
            color: [this.COLORS[1], this.COLORS[6], this.COLORS[9],this.COLORS[5],this.COLORS[3]],
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            legend: {
              orient: "horizontal",
              x: 40,
              textStyle: {
                color: "#fff",
                fontSize: 12
              },
              data: ["火灾扑救", "抢险救援", "社会救助", "其他出动","警情总量"]
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                axisLine: {
                  lineStyle: {
                    color: "rgba(255,255,255,0.5)"
                  }
                },
                data: data.Data.map(o => {
                  return o.name;
                })
              }
            ],
            yAxis: [
              {
                type: "value",
                name: "灾情数量（起）",
                axisTick: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    color: "rgba(255,255,255,0.3)"
                  }
                },
                axisLabel: {
                  margin: 10,
                  textStyle: {
                    fontSize: 14,
                    color: "rgba(255,255,255,0.3)"
                  }
                },
                splitLine: {
                  lineStyle: {
                    color: "rgba(255,255,255,0.3)"
                  }
                }
              }
            ],
            series: [
              {
                name: "火灾扑救",
                type: "line",
                symbol: "circle",
                symbolSize: 5,
                showSymbol: true,
                stack: "扑救",
                lineStyle: {
                  normal: {
                    width: 3
                  }
                },
                label: {
                  normal: {
                    show: true,
                    position: "top"
                  }
                },
                data: data.Data.map(o => {
                  return o.hzjy_list;
                })
              },
              {
                name: "抢险救援",
                type: "line",
                symbol: "circle",
                symbolSize: 5,
                showSymbol: true,
                stack: "救援",
                lineStyle: {
                  normal: {
                    width: 3
                  }
                },
                label: {
                  normal: {
                    show: true,
                    position: "top"
                  }
                },
                data: data.Data.map(o => {
                  return o.qxpj_list;
                })
              },
              {
                name: "社会救助",
                type: "line",
                symbol: "circle",
                symbolSize: 5,
                showSymbol: true,
                stack: "救助",
                lineStyle: {
                  normal: {
                    width: 3
                  }
                },
                label: {
                  normal: {
                    show: true,
                    position: "top"
                  }
                },
                data: data.Data.map(o => {
                  return o.shjz_list;
                })
              },
              {
                name: "其他出动",
                type: "line",
                symbol: "circle",
                symbolSize: 5,
                showSymbol: true,
                stack: "出动",
                lineStyle: {
                  normal: {
                    width: 3
                  }
                },
                label: {
                  normal: {
                    show: true,
                    position: "top"
                  }
                },
                data: data.Data.map(o => {
                  return o.qtcd_list;
                })
              }
              ,
              {
                name: "警情总量",
                type: "line",
                symbol: "circle",
                symbolSize: 5,
                showSymbol: true,
                stack: "总量",
                lineStyle: {
                  normal: {
                    width: 3
                  }
                },
                label: {
                  normal: {
                    show: true,
                    position: "top"
                  }
                },
                data: data.Data.map(o => {
                  return o.total;
                }),
                markPoint:{
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
              }
            ]
          };
          this.chartInstance=this.$Crender('chart-5',this.option)
          this.chartInstance.on("click", e => {
            //console.log(e);
            if(e.name=="最大值"||e.name=="最小值"||e.name=="平均值"){
              return;
            }
            let date = e.name;
            let ZQLX = e.seriesName;
            $this.keyModal=date+","+ZQLX
            $this.$refs.dialog.query(date+","+ZQLX)
          });
          this.showLoading = false;
      })
    }
  },
  mounted(){
      this.renderChart()
  }
};
</script>
<style scoped>
</style>
